<template>
    <el-form ref="form" :model="main" label-width="80px" style="width:800px;">
        <el-breadcrumb separator="/" style="margin-bottom:20px;">
            <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-setting" style="margin-right:4px;"></i>首页</el-breadcrumb-item>
            <el-breadcrumb-item>主酒店编辑</el-breadcrumb-item>
        </el-breadcrumb>
    
        <el-form-item label="城市">
            <el-checkbox v-for="item in selectCity" v-model="item.label">{{item.value}}</el-checkbox>
    
            <el-button type="text" style="margin-left:10px;" v-if="add" @click="add = false">添加</el-button>
            <div class="nameCity" v-else style="margin-left:10px;">
                <el-input placeholder="请输入城市名称" v-model="input" style="width:120px;"></el-input>
                <el-button type="text" @click="addCity" style="margin-left:10px">确定</el-button>
                <el-button type="text" @click="cancelCity" style="margin-left:10px">取消</el-button>
            </div>
        </el-form-item>
        
        <el-form-item label="幻灯片">
            <banner ref="mainBanner" :src="main.url"></banner>
        </el-form-item>
    
        <el-form-item label="酒店简介">
            <quill-editor ref="myTextEditor" v-model="main.brief" :config="editorOption">
            </quill-editor>
        </el-form-item>
    
        <el-form-item>
            <el-button type="primary" @click="mainRevamp">修改</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import banner from './banner.vue'

export default {
    data() {
        return {
            editorOption: {},
            add: true,
            input: "",
            selectCity: [],
            main: {
                belong_id: null,
                brief: "",
                city: "",
                hotel_id: "",
                hotel_img: "",
                hotel_name: "",
                hotel_type: 1,
                location: "",
                location_id: 0,
                phone: "",
                site: "",
                sole_id: 0,
                url: "",
                chain_url:'{"guest":{"url":""},"center":{"url":""},"mating":{"url":""},"favorable":{"url":""}}'
            },
        }
    },
    mounted() {
        this.$http.post(this.ajaxUrl() + "/index/conInquire?id=" + this.$store.state.grogshop.hotelId).then((response) => {

            //城市
            if (response.data.city) {
                if (response.data.city.length != 0) {
                    let city = response.data.city.split(',');
                    for (let i = 0; i < city.length; i++) {
                        this.selectCity.push({
                            value: city[i],
                            label: true
                        })
                    }
                }
            }

            if (typeof response.data.chain_url === "string") {
                response.data.chain_url = eval('(' + response.data.chain_url + ')');
            }

            if (response.data && response.data.length != 0) {
                this.main = response.data;
            }

        })
    },
    methods: {
        addCity() {
            if (this.input.length === 0) {
                this.$message.error('添加内容不能为空');
            } else {
                this.selectCity.push({
                    value: this.input,
                    label: true
                });
                this.add = true;
                this.input = "";
            }
        },
        cancelCity() {
            this.input = "";
            this.add = true;
        },
        mainRevamp() {

            let select = [];
            for (let i = 0; i < this.selectCity.length; i++) {
                if (this.selectCity[i].label) {
                    select.push(this.selectCity[i].value);
                }
            }
            this.main.city = select.join(",");

            this.main.url = this.$refs.mainBanner.fileList;

            this.$http.get(this.ajaxUrl() + '/index/conAmend', {
                params: {
                    infodata: this.main
                }
            }).then((res) => {
                if (res.data.sort === 1) {
                    this.$message({
                        message: '修改成功！',
                        type: 'success'
                    });
                } else {
                    this.$message.error('修改失败！');
                }
            })
        }
    },
    components: {
        banner,
        quillEditor
    }
}
</script>


<style>
.ql-container {
    height: 340px!important;
}

.nameCity {
    display: inline-block;
}
</style>